body {
  margin: 0;
  padding: 0;
  background-color: #0D1428;

  /* 1. (祖先盒子)父盒子 通过设置flex布局 ->实现子盒子 ->[水平+垂直] 居中 */
  display: flex;

  /* 2. 给 (祖先盒子)父盒子 设置默认高度, 以免出现其他问题. */
  min-height: 100vh;
  justify-content: center;
  align-items: center;
}

.box {
  /* 4. 通过 "子绝父相" 让遮罩层正常盖在 ->box盒子 */
  position: relative;
  width: 150px;
  height: 150px;
  background-color: #172033;
  border-radius: 10px;

  /* 5. 将 "遮罩层" 超出 box盒子 内容的地方都隐藏. */
  /* 细节2：设置超出 box盒子 隐藏后, 往后 ->比如设置圆角效果, 多余的也会隐藏！！！ */
  overflow: hidden;
}

/* 3. 给 box盒子 上盖[第一层] ->"遮罩层" */
.box::before {
  content: '';
  position: absolute;
  height: 300px;
  width: 300px;

  background: radial-gradient(#01D17D, transparent, transparent);

  /* 7. 使用动画：*/
  animation: animate 1.5s linear infinite;
}

/* 6. 配置动画 */
@keyframes animate {
  0% {
    transform: translate(-150px, -150px);
  }
  25% {
    transform: translate(0, -150px);
  }
  50% {
    transform: translate(0, 0);
  }
  75% {
    transform: translate(-150px, 0);
  }
  100% {
    transform: translate(-150px, -150px);
  }
}

/* 8. 设置 ->[第二个] "遮罩层" */
.box::after {
  content: '';
  /* 细节3：它...还是子, 所以是 ->绝对定位啊== */
  position: absolute;

  /* 细节4：在 [绝对+相对]定位下, inset属性可充当 四个方位 */
  /* 设置像素值后, 即向内 ->四角以多少像素, 向内渲染对应盒子...(没给宽高时) */
  inset: 2px;
  border-radius: 10px;
  background-color: #172033;
}

/* 9. 经过box盒子时 ->[第一个] "遮罩层" ->停止动画, 背景变透明 */
.box:hover::before {
  animation: none;
  background: transparent;
}

/* 10. 此时经过的 box 盒子, 采取另一种盒阴影效果, 展示给用户... */
.box:hover{
  box-shadow: 0 0 4px #01D17D, 0 0 4px #01D17D, 0 0 80px #01D17D;
}